<script setup lang="ts">
import { ref, computed, defineExpose } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { title } from "process";
// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
// 初始化ECharts
const props = defineProps({
  title: {
    type: String,
    default: "标题"
  },
  subtext: {
    type: String,
    default: "副标题"
  },
  server: {
    type: Array,
    default: []
  },
  serverPie: {
    type: Object,
    default: {}
  }
});

const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });
setOptions({
  title: {
    text: props.title,
    subtext: props.subtext,
    textAlign: "center",
    left: "49%",
    top: "31%",
    textStyle: {
      fontSize: 18,
      fontWeight: "bold",
      color: "#333"
    },
    subtextStyle: {
      color: "#666",
      fontSize: 14
    }
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c} ({d}%)"
  },
  legend: {
    show: true,
    bottom: "5%"
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "60%"],
      center: ["50%", "40%"],
      avoidLabelOverlap: true,
      label: {
        show: true,
        fontWeight: "bold",
        formatter: function (params) {
          return `${params.name}\n${params.value}个`;
        }
      },
      data: props.server,
      ...props.serverPie
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<style lang="scss" scoped></style>
